<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <el-cascader
          class="region"
          v-model="queryParams.salesGrade"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader>
      </el-col>
      <el-col :span="12" style="background-color: #f5f5f5; height: 30px">
        <nav id="navbar">
          <!-- <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">库存分析</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">地区排行</a>
            </li>
          </ul> -->
        </nav>
      </el-col>
      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->
    </el-row>

    <!-- <section id="section1">
      <el-row
        style="background: #fff; padding: 20px 16px 0; margin-bottom: 32px"
      >
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <i class="el-icon-s-data" style="margin-right: 5px" />销售总览
        </h4>
        <panel-group
          @handleSetLineChartData="handleSetLineChartData"
          :biNumberOfItem="this.biNumberOfItem"
          :biNumberItem="this.biNumberItem"
        />
      </el-row>
      
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <chartData :chart-data="echartData" />
      </el-row>
    </section> -->
    <section>
      <el-card>
        <!-- <div> -->
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="" prop="brandName">
            <el-select
              v-model="queryParams.itemBrand"
              placeholder="选择品牌"
              clearable
              filterable
            >
              <el-option
                v-for="dict in dict.type.sys_product_pp"
                :key="dict.value"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="firstLevelColumn">
            <el-select
              v-model="queryParams.firstLevelColumn"
              placeholder="请选择一级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_pl"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="secondLevelColumn">
            <!-- <el-input v-model="queryParams.secondLevelColumn" placeholder="请输入三级类目" clearable
          @keyup.enter.native="handleQuery" /> -->
            <el-select
              v-model="queryParams.secondLevelColumn"
              placeholder="请选择三级类目"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_cycle"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="isNewList">
            <el-select
              v-model="queryParams.isNewList"
              placeholder="新老品"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_sale_view"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="granularity">
            <el-select
              v-model="queryParams.granularity"
              placeholder="颗粒度"
              clearable
              style="width: 150px"
              filterable
              remote
              :remote-method="getDatas"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
          <!-- <br /> -->
          <el-form-item label="" prop="newProStartTime">
            <dayTime
              @getDateArr="getDateArrTime"
              @changDay="changDayTime"
              :timeArr="timeArrTime"
              :dayActive="this.dayActiveTime"
              :dayLimit="1095"
            />
          </el-form-item>
          <el-form-item label="" prop="newProStartTime"> </el-form-item>
          <el-form-item label="" prop="newProStartTime"> </el-form-item>
          <br />
          <el-form-item label="" prop="productSeason">
            <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
            <el-select
              v-model="queryParams.productSeason"
              placeholder="请选择商品-季节"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_jijie"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="designFabricName">
            <!-- <el-input v-model="queryParams.designFabricName" placeholder="请输入面料名称" clearable
           /> -->
            <el-select
              v-model="queryParams.designFabricName"
              clearable
              multiple
              filterable
              placeholder="主面料名称"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in mianliao"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationLevel">
            <el-select
              v-model="queryParams.operationLevel"
              placeholder="请选择运营-层级"
              clearable
              multiple
              style="width: 150px"
            >
              <el-option
                v-for="dict in dict.type.sys_product_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="operationMainProducts">
            <el-input
              v-model="queryParams.operationMainProducts"
              placeholder="商品-主推款"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
        </el-form>
        <!-- </div> -->
      </el-card>
    </section>

    <section id="section1">
      <!-- margin-bottom: 32px  -->
      <el-row :gutter="10" style="padding: 16px 0">
        <el-col :span="24">
          <!-- style="height: calc(100vh - 500px)" -->
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> 商品排行榜</span>
              <el-select
                v-model="queryParams.itemType"
                placeholder="产品视角"
                @change="changeView"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(2, 6)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </div>
            <!-- :height="pageHeight" -->
            <div ref="tableDom">
              <el-table
                :maxHeight="ItemDateList.length ? tableHeight : 'auto'"
                :data="ItemDateList"
                highlight-current-row
                style="width: 100%"
                ref="table"
                @cell-click="goodstableEdit"
              >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column
                  width="60"
                  label="排名"
                  prop="serialNumber"
                ></el-table-column>
                <el-table-column
                  width="60"
                  label="产品图"
                  align="center"
                  prop="picUrl"
                  ><template slot-scope="scope">
                    <image-preview
                      :src="scope.row.picUrl"
                      :width="40"
                      :height="40"
                    />
                    <!-- <el-popover
                      effect="light"
                      trigger="click"
                      placement="left"
                      width="auto"
                      v-show="scope.row.picUrl"
                    >
                      <template #default>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="
                            width: 800px;
                            height: 600px;
                            object-fit: contain;
                          "
                        />
                      </template>
                      <template #reference>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="width: 40px; height: 40px; object-fit: contain"
                        />
                      </template>
                    </el-popover> -->
                  </template>
                </el-table-column>
                <el-table-column
                  width="140"
                  label="颗粒度"
                  align="center"
                  prop="itemGrade"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="queryParams.itemType == 'item'"
                      style="
                        color: rgb(37, 137, 255);
                        cursor: pointer;
                        text-decoration: underline;
                      "
                      @click="gotoSku(scope.row)"
                    >
                      {{ scope.row.itemGrade }}
                    </div>
                    <span v-else>{{ scope.row.itemGrade }}</span>
                    <!-- <el-button size="mini" @click="gotoApply(scope.row)">
              样衣记录
            </el-button> -->
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="颜色"
                  align="center"
                  prop="colorProperty"
                  v-if="
                    queryParams.itemType == 'skc' ||
                    queryParams.itemType == 'sku'
                  "
                />
                <el-table-column
                  width="100"
                  label="销售金额"
                  align="center"
                  prop="salesAmount"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.salesAmount }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  width="160"
                  label="销售趋势"
                  align="center"
                  prop="name"
                >
                  <template slot-scope="scope">
                    <div
                      style="height: 20px; width: 150px"
                      :ref="'echarts' + scope.row.itemGrade"
                    ></div>
                  </template>
                </el-table-column>
                <!-- <i class="el-icon-top" />
                    <i class="el-icon-bottom" /> -->
                <el-table-column
                  width="100"
                  label="退款金额"
                  align="center"
                  prop="returnAmount"
                />
                <el-table-column
                  width="100"
                  label="净销售额"
                  align="center"
                  prop="netSalesAmount"
                ></el-table-column>

                <el-table-column
                  width="100"
                  label="综合退货率"
                  align="center"
                  prop="comprehensiveReturnRate"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.comprehensiveReturnRate }}%</div>
                  </template>
                </el-table-column>

                <el-table-column
                  width="100"
                  label="总销售件数"
                  align="center"
                  prop="totalSalesNumber"
                ></el-table-column>

                <el-table-column
                  width="100"
                  label="净销售件数"
                  align="center"
                  prop="netSalesNumber"
                />
                <el-table-column
                  width="100"
                  label="商品折扣率"
                  align="center"
                  prop="discountRateGoods"
                >
                  <template
                    slot-scope="scope"
                    v-if="scope.row.discountRateGoods"
                  >
                    <div>{{ scope.row.discountRateGoods }}%</div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="毛利额"
                  align="center"
                  prop="grossProfit"
                />
                <el-table-column
                  width="100"
                  label="毛利率"
                  align="center"
                  prop="grossProfitRate"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ (scope.row.grossProfitRate * 100).toFixed(2) }}%
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="发货前退货数"
                  align="center"
                  prop="returnBeforeShipmentNumber"
                />
                <el-table-column
                  width="100"
                  label="发货后退货数"
                  align="center"
                  prop="returnAfterShipmentNumber"
                />
                <el-table-column
                  width="100"
                  label="总退货件数"
                  align="center"
                  prop="totalReturnNumber"
                />
                <el-table-column
                  width="100"
                  label="总花费"
                  align="center"
                  prop="cost"
                />
                <el-table-column
                  width="100"
                  label="总成交金额"
                  align="center"
                  prop="totalFinishAmount"
                />
                <el-table-column
                  width="100"
                  label="库存"
                  align="center"
                  prop="endingInventory"
                />
                <el-table-column
                  width="100"
                  label="采购在途"
                  align="center"
                  prop="salesGrossProfit"
                />
                <el-table-column
                  width="100"
                  label="SD单件数"
                  align="center"
                  prop="sdNumber"
                />
                <el-table-column
                  width="100"
                  label="MJX单件数"
                  align="center"
                  prop="mjxNumber"
                />
                <el-table-column
                  width="100"
                  label="可售天数"
                  align="center"
                  prop="saleDays"
                >
                  <template slot="header" slot-scope="scope">
                    <div>
                      可售天数<span
                        class="textname"
                        @click="selectformisNew('可售天数')"
                      >
                        <i class="el-icon-question"></i>
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="可售月数"
                  align="center"
                  prop="saleDays"
                >
                  <template slot="header" slot-scope="scope">
                    <div>
                      可售月数<span
                        class="textname"
                        @click="selectformisNew('可售月数')"
                      >
                        <i class="el-icon-question"></i>
                      </span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      {{ (scope.row.saleDays / 30).toFixed(2) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  label="上新时间"
                  align="center"
                  prop="newTime"
                />
                <el-table-column
                  width="100"
                  label=""
                  align="center"
                  prop="isNew"
                >
                  <template slot="header" slot-scope="scope">
                    <div>
                      是否新品<span
                        class="textname"
                        @click="selectformisNew('是否新品')"
                      >
                        <i class="el-icon-question"></i>
                      </span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  width="100"
                  label=""
                  align="center"
                  prop="exhaustionRate"
                >
                  <template slot="header" slot-scope="scope">
                    <div>
                      售罄率<span
                        class="textname"
                        @click="selectformisNew('售罄率')"
                      >
                        <i class="el-icon-question"></i>
                      </span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      {{ (scope.row.exhaustionRate * 100).toFixed(2) }}%
                    </div>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  width="100"
                  label="3天销售量"
                  align="center"
                  prop="threeSaleNum"
                />
                <el-table-column
                  width="100"
                  label="7天销售量"
                  align="center"
                  prop="sevenSaleNum"
                />
                <el-table-column
                  width="100"
                  label="15天销售量"
                  align="center"
                  prop="fifteenSaleNum"
                />
                <el-table-column
                  width="100"
                  label="30天销售量"
                  align="center"
                  prop="thirtySaleNum"
                /> -->
              </el-table>
            </div>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getselectItemDateList(queryParams)"
            />
          </el-card>
        </el-col>
        <!-- <el-col :span="5">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 渠道排行分析</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col> -->
      </el-row>
    </section>

    <section id="section" style="padding: 32px">
      <el-row :gutter="20" class="data_section" style="margin-bottom: 30px">
        <el-col :span="4">
          <!-- <div class="data_list all_head"> -->
          <!-- <span class="data_num head">总数据：</span> -->
          <!--pjtUrl + itemData.picUrl  -->
          <orign
            :src="itemData.picUrl"
            alt=""
            style="width: 100%; height: 300px; object-fit: cover"
          />
          <!-- v-if="itemData.picFullUrl"
          <image-preview
            v-else
            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
            alt=""
            style="width: 100%; height: 300px; object-fit: cover"
          /> -->

          <!-- </div> -->
        </el-col>
        <el-col :span="20">
          <!-- <el-row> -->
          <div style="">
            <!-- {{ pjtUrl + itemData.picUrl }}-->
            <!-- {{ itemData.picFullUrl }} -->
            <span
              >款号：<el-select
                v-model="productNo"
                clearable
                filterable
                remote
                :remote-method="getDatas"
                placeholder="请输入"
                @change="testItem"
                style="width: 150px"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option> </el-select
            ></span>
          </div>

          <panel-group
            @handleSetLineChartData="handleSetLineChartData"
            :itemData="itemData"
          />
        </el-col>
      </el-row>
      <el-row style="background: #fff; padding: 32px 32px; margin-bottom: 32px">
        <chartData :chart-data="echartDataI" />
      </el-row>
    </section>

    <!-- <section id="section2">
      <el-row
        style="background: #fff; padding: 0px 16px 0; margin-bottom: 32px"
      >
        
        <h4
          style="
            font-weight: 500;
            color: #666;
            margin-left: 5px;
            margin-top: 25px;
          "
        >
          <span
            ><i
              class="el-icon-s-data"
              style="margin-right: 5px"
            />趋势分析</span
          >
          <span style="margin-left: 700px">款号：{{ productNo }}</span>
        </h4>

        <chartData :chart-data="echartDataI" />
      </el-row>
    </section> -->

    <section id="section2">
      <!-- margin-bottom: 32px  -->
      <el-row :gutter="10" style="background: #fff; padding: 16px 16px">
        <el-col :span="12">
          <!-- style="height: calc(100vh - 500px)" -->
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> skc分析</span>
              <!-- <el-select
                v-model="productView"
                placeholder="产品视角"
                clearable
                @change="changeView"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(0, 3)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select> -->
            </div>
            <!-- :height="pageHeight" @cell-click="tableEdit"-->
            <!-- <div ref="tableDom"> :maxHeight="skcitemData.length ? tableHeight : 'auto'"-->
            <el-table
              :data="skcitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              @cell-click="tableEdit"
              :row-class-name="tableRowClassName"
            >
              <!-- <el-table-column
                  width="60"
                  label="排名"
                  type="index"
                ></el-table-column>
                <el-table-column
                  width="60"
                  label="产品图"
                  align="center"
                  prop="picUrl"
                  ><template slot-scope="scope">
                    <el-popover
                      effect="light"
                      trigger="click"
                      placement="left"
                      width="auto"
                      v-show="scope.row.picUrl"
                    >
                      <template #default>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="
                            width: 800px;
                            height: 600px;
                            object-fit: contain;
                          "
                        />
                      </template>
                      <template #reference>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="width: 20px; height: 20px; object-fit: contain"
                        />
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  width="140"
                  label="颗粒度"
                  align="center"
                  prop="itemGrade"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="productView == 'item'"
                      style="
                        color: rgb(37, 137, 255);
                        cursor: pointer;
                        text-decoration: underline;
                      "
                      @click="gotoSku(scope.row)"
                    >
                      {{ scope.row.itemGrade }}
                    </div>
                    <span v-else>{{ scope.row.itemGrade }}</span>
                   
                  </template>
                </el-table-column> -->
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              <el-table-column
                width="125"
                label="skc"
                align="center"
                prop="skc"
              ></el-table-column>
              <el-table-column
                width="90"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="库存占比"
                align="center"
                prop="inventoryRatioStr"
              />
              <el-table-column
                width="100"
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.comprehensiveReturnRate }}%</div>
                </template>
              </el-table-column>
              <!-- <el-table-column
                width="100"
                label="销售占比"
                align="center"
                prop="saleProportion"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.saleProportion }}%</div>
                </template>
              </el-table-column> -->

              <el-table-column
                width="90"
                label="净销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="销售占比"
                align="center"
                prop="saleProportionStr"
              />
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
              <el-table-column
                width="100"
                label="可售月数"
                align="center"
                prop="saleDays"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.saleDays / 30).toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
            </el-table>
            <!-- </div> -->
            <!-- <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="handleChange"
            /> -->
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-pie-chart"></i> 颜色库销比</span>
              <el-button type="primary" @click="selectAll"
                >查看完整数据</el-button
              >
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MixChart
                :id="'MixChart'"
                :chartData="echartData"
                @SetLineChartData="SetLineChartData"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section2">
      <!-- margin-bottom: 32px-->
      <el-row :gutter="10" style="background: #fff; padding: 20px 16px 0">
        <el-col :span="12">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 尺码分析</span>
            </div>
            <el-table
              :data="skuitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              <!-- <el-table-column
                width="120"
                label="skc"
                align="center"
                prop="skc"
              ></el-table-column> -->
              <el-table-column
                width="110"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="110"
                label="尺码 "
                align="center"
                prop="proSize"
              ></el-table-column>
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="100"
                label="综合退货率"
                align="center"
                prop="comprehensiveReturnRate"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.comprehensiveReturnRate }}%</div>
                </template>
              </el-table-column>

              <!-- <el-table-column
                width="100"
                label="销售占比"
                align="center"
                prop="saleProportion"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.saleProportion }}%</div>
                </template>
              </el-table-column> -->

              <el-table-column
                width="90"
                label="净销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
              <el-table-column
                width="100"
                label="可售月数"
                align="center"
                prop="saleDays"
              >
                <template slot-scope="scope">
                  <div>
                    {{ (scope.row.saleDays / 30).toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 尺码库销比</span>
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MinChart
                :id="'MinChart'"
                :minchartData="echartDataMin"
                height="410px"
                width="830px"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section" style="padding: 32px">
      <el-row :gutter="20" class="data_section" style="margin-bottom: 30px">
        <el-row :gutter="20" class="data_section">
          <el-col :span="24">
            <el-col :span="3">
              <!-- <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              > -->
              <el-select
                v-model="queryParams.itemType"
                placeholder="产品视角"
                @change="changeitemType"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(2, 6)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-col>
            <el-col :span="18">
              <el-button
                type="primary"
                size="mini"
                @click="selectKeyWordStatisticsEchartsII"
                >查询</el-button
              >
            </el-col>

            <el-col :span="3">
              <el-select
                v-model="queryParams.property"
                placeholder="关键词属性"
                filterable
                @change="selectKeyWordStatisticsEchartsII"
              >
                <el-option
                  v-for="item in itemTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-col>
        </el-row>
        <el-form
          ref="form"
          :model="formData"
          :inline="true"
          style="margin-top: 20px"
        >
          <!-- <el-card> -->
          <el-col :span="20">
            <el-row
              v-for="(noticItem, index) in noticForm.noticConfig"
              :key="index"
            >
              <el-col
                :span="10"
                v-for="nameItem in noticItem.name"
                :key="nameItem.key"
              >
                <el-form-item prop="productNo" label=" ">
                  <el-select
                    v-model="nameItem.itemOrSpu"
                    clearable
                    filterable
                    remote
                    :remote-method="getDatas"
                    :loading="loading"
                    placeholder="item"
                    style="width: 150px"
                    v-if="queryParams.itemType == 'item'"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="nameItem.itemOrSpu"
                    clearable
                    filterable
                    remote
                    :remote-method="selectproductNo"
                    :loading="loading"
                    placeholder="款式编码"
                    @change="testAdd"
                    style="width: 150px"
                    v-if="queryParams.itemType != 'item'"
                  >
                    <el-option
                      v-for="item in optionsProductNo"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="colorProperty" label=" ">
                  <el-select
                    ref="selectRef"
                    v-model="nameItem.color"
                    clearable
                    filterable
                    placeholder="颜色属性"
                    @change="testColor"
                    style="width: 200px"
                  >
                    <el-option
                      v-for="item in ColorLike"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="size" label=" ">
                  <el-select
                    v-model="nameItem.size"
                    clearable
                    filterable
                    placeholder="尺寸"
                    style="width: 100px"
                  >
                    <el-option
                      v-for="item in sizeList"
                      :key="item.id"
                      :label="item.size"
                      :value="item.size"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item @focus="onFocus" prop="productNum" label=" ">
              <el-input
                v-model="nameItem.productNum"
                placeholder="数量"
                style="width: 100px"
                type="number"
                oninput="value=value.replace(/^0|[^0-9]/g,'')"
                @focus="testNum()"
              ></el-input>
            </el-form-item>

            <el-form-item prop="num" label="库存量:" label-width="70px">
              {{ sizeArr[nameItem.id] }}
            </el-form-item>
            <el-form-item prop="isReturn" label="是否归还" label-width="80px">
              <el-radio-group
                v-model="nameItem.isReturn"
                size="small"
                fill="#66b1ff"
              >
                <el-radio :label="'是'">是</el-radio>
                <el-radio :label="'否'">否</el-radio>
              </el-radio-group>
            </el-form-item>-->
              </el-col>

              <el-col :span="4">
                <el-button
                  type="primary"
                  size="mini"
                  @click="addDomain(noticItem)"
                  >新增</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click.prevent="removeDomain(noticItem)"
                  >删除</el-button
                >
              </el-col>
            </el-row>
          </el-col>
          <!-- </el-card> -->
        </el-form>
      </el-row>
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <div
          style="margin-left: 2px; margin-right: 2px; height: 460px"
          ref="echarts"
        ></div>
      </el-row>
    </section>

    <!-- 添加或修改产品一级信息对话框  @close="handleClose"-->
    <el-dialog
      :visible.sync="open"
      width="95%"
      height="100%"
      append-to-body
      v-if="open"
      @close="handleClose"
    >
      <div class="el-dialog-div">
        <MixChart
          :id="'MixAllChart'"
          :chartData="echartData"
          @SetLineChartData="SetLineChartData"
          :height="'50%'"
          :width="'100%'"
        />
        <MinChart
          :id="'MinAllChart'"
          :minchartData="echartDataMin"
          :height="'50%'"
          :width="'100%'"
        />
      </div>
    </el-dialog>
    <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
    <el-dialog
      :visible.sync="openformEdit"
      append-to-body
      v-if="openformEdit"
      width="510px"
    >
      <el-row>
        <el-col :span="19">
          <timeSearch
            @getDateArr="getDateArr"
            @changDay="changDay"
            :timeArr="timeArr"
            :dayActive="this.dayActive"
            :dayLimit="1095"
            v-if="formEdit.property == '是否新品'"
          />
          <dayTime
            @getDateArr="getDateArrTime"
            @changDay="changDayTime"
            :timeArr="timeArrTime"
            :dayActive="this.dayActiveTime"
            :dayLimit="1095"
            v-if="
              formEdit.property == '可售天数' || formEdit.property == '可售月数'
            "
          />
          <exhaustionDay
            @getDateArr="getDateArrRate"
            @changDay="changDayRate"
            :timeArr="timeArrRate"
            :dayActive="this.dayActiveRate"
            :dayLimit="1095"
            v-if="formEdit.property == '售罄率'"
          />
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >重新定义</el-button
          >
        </el-col>
      </el-row>
      <handleform :popoverInput="formEdit" />
    </el-dialog>
  </div>
</template>

<script>
import { getCache } from "@/api/monitor/cache";
import * as echarts from "echarts";
import date from "./day/date.vue";
import day from "./day/day.vue";
import exhaustionDay from "./day/exhaustionDay.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
import dayTime from "./day/dayTime.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
// import LineChart from './components/LineChart'
import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
  comparisonStatistics,
} from "@/api/sku/sku";
// queryContentByKey,
// selectItemStatistics,
// src\views\example\Charts\MixChart.vue
import MixChart from "@/views/sku/Chart/MixChart.vue";
import MinChart from "@/views/sku/Charts/MinChart.vue";
import orign from "@/components/ImagePreview/orign.vue";

// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
import {
  listBiSkuSaleDwd,
  getBiSkuSaleDwd,
  delBiSkuSaleDwd,
  addBiSkuSaleDwd,
  updateBiSkuSaleDwd,
  selectItemDateList,
  selectItemDateListPic,
} from "@/api/sku/BiSkuSaleDwd";
// selectItemStatistics,
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
import {
  listFabric,
  getFabric,
  delFabric,
  addFabric,
  updateFabric,
  selectFabricNameList,
  synProDesignFabricByIds,
} from "@/api/data/Fabric";

// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  productNoLike,
} from "@/api/product/template";
import {
  listSecondry,
  getSecondry,
  delSecondry,
  addSecondry,
  updateSecondry,
  getInfoByName,
  productNoColorLike,
  listAllSize,
  colorLike,
} from "@/api/product/secondry";
import { getInfo } from "@/api/login.js";

export default {
  name: "Admin",
  dicts: [
    "sys_product_view",
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_level",
    "sys_sale_view",
    "sys_product_pp",
  ],
  components: {
    orign,
    date,
    // skc
    MixChart,

    // sku
    MinChart,
    // GithubCorner,
    PanelGroup,
    PanelGroupI,
    // LineChart,

    // RaddarChart,
    // PieChart,
    // BarChart,

    chartData,
    chartDataI,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    exhaustionDay,
    dayTime,

    day,
  },
  data() {
    return {
      //
      formEdit: {},
      openformEdit: false,
      //data
      noticForm: {
        noticConfig: [
          {
            name: [
              {
                // value: "",
                // phone: "",
                itemOrSpu: "",
                color: "",
                size: "",
                // productNum: "",
                // isReturn: "是",
                // id: 0,
                // expressCompany: "",
              },
            ],
            // phone: [
            //     {
            //         value: "",
            //     },
            // ],
          },
        ],
      },

      //模糊匹配
      sizeList: [],
      ColorLike: [],
      optionsProductNo: [], // 选项，从后端传递过来
      //多选关键词
      formData: {
        libraryIdList: [{ id: "" }],
      },
      // productNooptions: [],
      dayActiveRate: 2,
      timeArrRate: [
        // { value: "1", label: "今天" },
        { value: "2", label: "售罄时间定义" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "最近30天" },
      ],
      timeGapRate: { startSellOutDate: "", endSellOutDate: "" },
      //总览数据
      itemData: {},
      productNo: "",
      //item模糊匹配列表
      options: [], // 选项，从后端传递过来
      open: false,
      //skc列表
      skcitemData: [],
      //sku列表
      skuitemData: [],
      echartData: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      loading: false,
      //面料名称
      mianliao: [],
      //纵向滚动条
      tableHeight: "",
      // 总条数
      total: 0,

      //商品排行
      ItemDateList: [],
      //产品视角
      productView: "item",
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      // 统计店铺信息
      commandstats: null,
      //统计渠道信息
      usedmemory: null,
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 540,
      //BI指标数据
      biNumberItem: [],
      biNumberSku: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: "",

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      // valueTime: "",
      groupType: "date",

      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮

      //传递数据
      echartDataI: {
        columns: ["支付日期", "销售金额", "退款金额", "净销售额"],
        rows: [],
      },
      highlightedSku: ["库存周转率"], // 初始化时，前两个元素高亮

      //Sku传递数据
      echartDataSku: {
        columns: ["支付日期", "库存周转率"],
        rows: [],
      },
      //时间
      //
      dayActive: 90,
      timeArr: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "日" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        { value: "90", label: "新品时间" },
      ],
      timeGap: { startTime: "", endTime: "" },
      dayActiveTime: 30,
      timeArrTime: [
        // { value: "2", label: "昨天" },
        // { value: "7", label: "最近7天" },
        { value: "30", label: "销售时间段" },
        // { value: "56", label: "周" },
        // { value: "365", label: "月" },
        // { value: "1", label: "自定义" },
        // { value: "90", label: "新品时间" },
      ],
      timeGapTime: { startTime: "", endTime: "" },
      // 店铺
      cascadeList: [],
      //, "天猫", "vfu运动旗舰店"
      value: ["VFU"],
      loading: false,
      //店铺名称
      shopName: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // productNo: null,
        // manufacturerCode: null,
        // salePrice: null,
        // tagPrice: null,
        firstLevelColumn: null,
        secondLevelColumn: null,
        // logoPosition: null,
        // purchasingReportAttachments: null,
        designFabricNameList: null,
        productSeason: null,
        operationMainProducts: null,
        operationLevel: null,

        itemType: "item",
        salesGrade: [],
        endTime: null,
        startTime: null,
        dateType: null,
        isNewList: null,
        newProStartTime: null,
        newProEndTime: null,
        itemOne: null,
        startSaleDays: "2024-01-08",
        endSaleDays: "2024-01-08",
        startSellOutDate: null,
        endSellOutDate: null,
        granularity: null,
        property: "salesAmount",

        // dictType: undefined,"2023-10-11","endTime":"2024-01-08"
      },
      itemTypeList: [
        { value: "salesAmount", label: "销售金额" },
        { value: "returnAmount", label: "退款金额" },
        { value: "netSalesAmount", label: "净销售额" },
        { value: "totalSalesNumber", label: "总销售件数" },
        { value: "netSalesNumber", label: "净销售件数" },
        { value: "returnBeforeShipmentNumber", label: "发货前退货件数" },
        { value: "returnAfterShipmentNumber", label: "发货后退货件数" },
        { value: "totalReturnNumber", label: "总退货件数" },
        { value: "comprehensiveReturnRate", label: "综合退货率" },
        { value: "grossProfit", label: "毛利额" },
        { value: "grossProfitRate", label: "毛利率" },
        { value: "endingInventory", label: "期末库存" },
        { value: "exhaustionRate", label: "售罄率" },
        { value: "sdNumber", label: "SD单件数" },
        { value: "mjxNumber", label: "MJX单件数" },
      ],
      libraryOptions: [
        // { value: "1", label: "库位1" },
        // { value: "2", label: "库位2" },
        // { value: "3", label: "库位3" },
        // { value: "4", label: "库位4" },
        // { value: "5", label: "库位5" },
        // { value: "6", label: "库位6" },
      ], // 库存名称列表
    };
  },
  created() {
    // this.$modal.msgError(
    //   "系统正在维护，本页面请勿操作，3月25日 12:00 恢复正常"
    // );
    // // this.openLoading2();
    // return;
    // console.log(1111111111);
    // var timeGap = JSON.parse(localStorage.getItem("objGap"));
    // if (timeGap) {
    //   console.log(JSON.stringify(timeGap));
    //   //   Object.assign(this.$data.valueTime, new Date(timeGap.valueTime));
    //   //   // this.groupType = timeGap.dateType;
    //   // this.$set(this.valueTime, timeGap.valueTime);
    //   this.valueTime = new Date(timeGap.startTime);
    //   //   this.$forceUpdate;
    //   //   // val = new Date(timeGap.startTime);
    //   //   // this.$emit("input", val);
    //   //   // this.timeObj.startTime = new Date(timeGap.startTime),
    //   //   //   this.timeObj.endTime = new Date(timeGap.endTime),
    // }
    // var storeForm = JSON.parse(localStorage.getItem("skuadminParams"));
    // if (storeForm) {
    //   // this.$set(this.queryParams, storeForm)
    //   this.queryParams = storeForm;
    //   this.getselectItemDateList(this.queryParams);
    // }
    // // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
    // // if (otherVal) {
    // //   this.$set(this.queryParams, "pageNum", otherVal.currentPage);
    // //   this.$set(this.queryParams, "pageSize", otherVal.pageSize);

    // //   // this.Nowscroll = otherVal.scrollTop
    // //   // this.scrollLeft = otherVal.scrollLeft
    // // }
    this.getSourceAll();
    //面料名称
    this.getmianliao();
    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */

    // this.openLoading();
  },
  mounted() {
    this.getEcharts();
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
    window.addEventListener("scroll", this.startScrollTimer);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.startScrollTimer);
  },
  //记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed() {
    window.onresize = null;
  },
  watch: {
    // timeGapRate: {
    //   handler: function (newnew, oldold) {
    //     console.log(JSON.stringify(newnew));
    //     if (this.cascadeList.length < 1) {
    //       return;
    //     }
    //     // this.list = [];
    //     this.handleChange();
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // timeGapTime: {
    //   handler: function (newnew, oldold) {
    //     console.log(JSON.stringify(newnew));
    //     // this.list = [];
    //     if (this.cascadeList.length < 1) {
    //       return;
    //     }
    //     this.handleChange();
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    // timeGap: {
    //   handler: function (newnew, oldold) {
    //     console.log(JSON.stringify(newnew));
    //     // this.list = [];
    //     if (this.cascadeList.length < 1) {
    //       return;
    //     }
    //     this.handleChange();
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // return "font-weight: bold;";
      if (row.spu === "汇总") {
        return "highlight-row";
      } else {
        return "";
      }
    },
    selectformisNew(type) {
      this.formEdit = {
        component: "sku/sale/index",
        property: type,
        path: "商品排行榜",
      };

      this.openformEdit = true;
    },

    // 打开加载层
    openLoading2() {
      this.$modal.loading("系统正在维护，3月25日 12:00 恢复正常");
    },
    //添加库存名称
    addLibraryIdList() {
      if (this.formData.libraryIdList.length > 4) {
        this.$modal.msgError("请选择不超过5个关键词");
        return;
      }
      if (this.formData.libraryIdList.length > 0) {
        let hasValue = false;
        for (let i = 0; i < this.formData.libraryIdList.length; i++) {
          if (!this.formData.libraryIdList[i].id) {
            hasValue = true;
            break;
          }
        }
        if (hasValue) {
          return this.$message.warning("请先选择未选择项");
        }
        this.formData.libraryIdList.push({ id: "" });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 1) {
        this.formData.libraryIdList.splice(index, 1);
        // this.$forceUpdate;
        const E = echarts.init(this.$refs.echarts);
        E.dispose();
      } else {
        this.$message.warning("至少选择一项");
      }
    },

    getEcharts() {
      console.log(JSON.stringify("ItemDateList", this.ItemDateList));
    },
    //曲线分析
    selectItemStatisticsEcharts(obj) {
      selectItemStatistics(obj).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.payDateUnit,
            销售金额: item.salesAmount,
            退款金额: item.returnAmount,
            净销售额: item.netSalesAmount,
            总销售件数: item.totalSalesNumber,
            净销售件数: item.netSalesNumber,
            发货前退货数: item.returnBeforeShipmentNumber,
            发货后退货数: item.returnAfterShipmentNumber,
            总退货件数: item.totalReturnNumber,
            综合退货率: item.comprehensiveReturnRate / 100,
            毛利额: item.grossProfit,
            毛利率: item.grossProfitRate / 100,
            净销售额: item.netSalesAmount,
            库存: item.endingInventory,
            售罄率: item.exhaustionRate / 100,
            SD单件数: item.sdNumber,
            MJX单件数: item.mjxNumber,
            可售天数: item.saleDays,
            商品折扣率: item.discountRateGoods / 100,
            总花费: item.cost,
            总成交金额: item.totalFinishAmount,
          });
        });
        console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    /* 获取货号列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      queryContentByKey({ keyWord: key }).then((res) => {
        // this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
      });
    },
    //状态改变
    changeTheme(val) {},
    //面料名称
    getmianliao() {
      this.loading = true;
      selectFabricNameList().then((response) => {
        // console.log(JSON.stringify(response));
        this.mianliao = response;
        // console.log(JSON.stringify(this.FabricList));
        // this.total = response.total;
        this.loading = false;
      });
    },

    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.getList();
      console.log(JSON.stringify(this.queryParams));
      if (!this.queryParams.itemType) {
        this.$modal.msgError("请选择产品视角");
        return;
      }
      this.handleChange();
      this.openformEdit = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.queryParams = {};

      this.resetForm("queryForm");
      this.ItemDateList = [];
      this.itemData = {};
      this.total = 0;
      this.echartDataI.rows = [];
      this.queryParams.salesGrade = ["VFU"];
      this.queryParams.itemType = "item";

      this.valueTime = new Date(new Date().setDate(new Date().getDate() - 1));
      // this.handleQuery();
    },
    //新老品时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.dayActive));
      console.log(JSON.stringify(this.timeGap));

      this.queryParams.newProStartTime = this.timeGap.startTime;
      this.queryParams.newProEndTime = this.timeGap.endTime;
    },
    //销售时间段
    changDayTime(val) {
      this.dayActiveTime = val;
      this.timeGapTime.startTime = val[0];
      this.timeGapTime.endTime = val[1];
    },
    getDateArrTime(value) {
      this.timeGapTime.startTime = value[0];
      this.timeGapTime.endTime = value[1];
      // console.log(JSON.stringify(this.dayActive));
      // console.log(JSON.stringify(this.timeGap));

      this.queryParams.startSaleDays = this.timeGapTime.startTime;
      this.queryParams.endSaleDays = this.timeGapTime.endTime;
      // this.handleChange();
    },
    //售罄时间段
    changDayRate(val) {
      this.dayActiveRate = val;
      this.timeGapRate.startSellOutDate = val[0];
      this.timeGapRate.endSellOutDate = val[1];
    },
    getDateArrRate(value) {
      this.timeGapRate.startSellOutDate = value[0];
      this.timeGapRate.endSellOutDate = value[1];

      console.log(JSON.stringify(this.timeGapRate));

      this.queryParams.startSellOutDate = value[0];
      this.queryParams.endSellOutDate = value[1];

      // this.changePage();
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      // let obj = {
      //   salesGrade: this.queryParams.salesGrade,
      //   ...this.timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // console.log(JSON.stringify(obj));
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      // (this.queryParams.salesGrade = this.queryParams.salesGrade),

      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;
      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        this.getselectItemDateList(this.queryParams);
      }
      // }
      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(this.timeObj.startTime),
        endTime: this.dateFormat(this.timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        // this.getnumberOfItem(param);
        // this.getTopSal(param);
      }
    },

    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj;
      console.log(JSON.stringify(this.timeObj));
      // let obj = {
      //   salesGrade: this.queryParams.salesGrade,
      //   ...timeObj,
      //   item: this.productView,
      //   ...this.queryParams,
      // };
      // var skuadminParams = JSON.parse(localStorage.getItem("skuadminParams"));
      // if (skuadminParams) {
      //   this.getselectItemDateList(skuadminParams);
      //   localStorage.setItem("skuadminParams", JSON.stringify(skuadminParams));
      // } else {
      if (this.cascadeList.length < 1) {
        return;
      }
      if (!this.queryParams.itemType) {
        this.$modal.msgError("请选择产品视角");
        return;
      }
      this.queryParams.pageNum = 1;
      // (this.queryParams.salesGrade = this.queryParams.salesGrade),
      this.queryParams.startTime = this.timeObj.startTime;
      this.queryParams.endTime = this.timeObj.endTime;
      this.queryParams.dateType = this.timeObj.dateType;

      // this.queryParams.item = this.productView;
      if (!this.queryParams.endTime) {
        return;
      } else {
        this.getselectItemDateList(this.queryParams);
      }

      let param = {
        dataSource: this.value,
        startTime: this.dateFormat(timeObj.startTime),
        endTime: this.dateFormat(timeObj.endTime),
        dataType: this.groupType,
      };
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return;
      } else {
        // this.getechartChannelData(obj)
        //客件数
        // this.getnumberOfItem(param);
        // //地区Top20
        // this.getTopSal(param);
      }
    },
    //视图角度
    changeView(val) {
      if (!this.queryParams.endTime) {
        this.$modal.msgError("请选择时间");
        return;
      }
      this.getselectItemDateList(this.queryParams);
      // let obj = {
      //   salesGrade: this.queryParams.salesGrade,
      //   ...this.timeObj,
      //   item: val,
      //   dataType: this.groupType,
      //   ...this.queryParams,
      // };
      // this.openLoading();
      // selectItemDateList(this.queryParams).then((response) => {
      //   this.$modal.closeLoading();
      //   this.ItemDateList = response.rows;
      //   this.total = response.total;
      //   this.goodstableEdit(response.rows[0]);

      //   // console.log(JSON.stringify(this.ItemDateList));
      // });
    },
    //跳转
    gotoSku(row) {
      let objGap = {
        value: this.value,
        // salesGrade: this.queryParams.salesGrade,
        timeObj: this.timeObj,
        ...this.queryParams,
        itemOne: row.itemGrade,
        valueTime: this.valueTime,
      };
      console.log(JSON.stringify(objGap));
      return;
      localStorage.setItem("objGap", JSON.stringify(objGap));
      //
      this.$router.push({ path: "/sku/manage" });
    },
    testItem(key) {
      let obj = {
        itemBrand: this.queryParams.itemBrand,
        salesGrade: this.queryParams.salesGrade.join(","),
        ...this.timeObj,
        itemOne: key,
        startSaleDays: this.timeGapTime.startTime,
        endSaleDays: this.timeGapTime.endTime,
      };
      console.log(JSON.stringify(obj));
      if (!obj.endTime) {
        return;
      } else {
        this.getitemSaleData(obj);
        this.getskcData(obj);
        this.selectItemStatisticsEcharts(obj);
      }
    },
    //页面加载数据
    getselectItemDateList(obj) {
      // var otherVal = JSON.parse(localStorage.getItem("skuadmin"));
      // if (otherVal) {
      //   // this.$set(this.queryParams, "pageNum", otherVal.currentPage);
      //   // this.$set(this.queryParams, "pageSize", otherVal.pageSize);

      //   this.Nowscroll = otherVal.scrollTop;
      //   this.scrollLeft = otherVal.scrollLeft;
      // }
      this.loading = true;
      console.log(JSON.stringify(obj));
      this.openLoading();
      selectItemDateList(obj).then((response) => {
        this.$modal.closeLoading();
        this.ItemDateList = [];
        this.ItemDateList = response.rows;
        this.$forceUpdate();
        this.total = response.total;

        if (response.rows.length > 0) {
          this.itemData = response.rows[0];
          this.goodstableEdit(response.rows[0]);
        }
        this.getselectItemDateListPic(obj);
        this.loading = false;
      });
    },
    getselectItemDateListPic(obj) {
      selectItemDateListPic(obj).then((response) => {
        console.log(JSON.stringify("ItemDateList", this.ItemDateList));
        this.ItemDateList = [];
        this.ItemDateList = response.rows;
        setTimeout((_) => {
          this.ItemDateList.forEach((e) => {
            let myChart = echarts.init(this.$refs["echarts" + e.itemGrade]);
            console.log(JSON.stringify(e.itemGrade));
            console.log(JSON.stringify(e.tendencyChart));
            myChart.setOption({
              grid: {
                left: "0",
                top: "0",
                right: "0",
                bottom: "0",
                containLabel: false,
              },
              xAxis: {
                type: "category",
                //不显示x轴线
                show: false,
              },
              yAxis: {
                type: "value",
                show: false,
              },
              series: [
                {
                  // data: e.tendencyChart.data.slice(-12) 取倒数12
                  data: e.tendencyChart.data,
                  //单独修改当前线条的颜色
                  lineStyle: {
                    normal: {
                      // color: "#f00",
                      width: 1,
                    },
                  },
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  areaStyle: {},
                },
              ],
            });
            window.addEventListener("resize", () => {
              myChart.resize();
            });
          });
        }, 0);
      });
    },
    goodstableEdit(row, column, cell, event) {
      if (!row) {
        console.log(1111);
        return;
      }
      if (column) {
        if (column.property == "picUrl") {
          return;
        }
      }
      this.productNo = row.itemGrade;
      let obj = {
        // salesGrade: this.queryParams.salesGrade,
        salesGrade: this.queryParams.salesGrade.join(","),
        ...this.timeObj,
        item: this.queryParams.itemType,
        // ...this.queryParams,
        itemBrand: this.queryParams.itemBrand,
        itemOne: row.itemGrade,
        startSaleDays: this.timeGapTime.startTime,
        endSaleDays: this.timeGapTime.endTime,
      };

      // // console.log(JSON.stringify());

      // selectItemStatistics(obj).then((response) => {
      //   var row = [];
      //   response.forEach((item) => {
      //     // console.log(1111111111111111);
      //     // console.log(JSON.stringify(item[column.property]));
      //     // console.log(1111111111111111);
      //     row.push({
      //       支付日期: item.payDateUnit,
      //       销售金额: item.salesAmount,
      //       退款金额: item.returnAmount,
      //       净销售额: item.netSalesAmount,
      //       总销售件数: item.totalSalesNumber,
      //       净销售件数: item.netSalesNumber,
      //       发货前退货件数: item.returnBeforeShipmentNumber,
      //       发货后退货件数: item.returnAfterShipmentNumber,
      //       总退货件数: item.totalReturnNumber,
      //       综合退货率: item.comprehensiveReturnRate,
      //       毛利额: item.grossProfit,
      //       毛利率: item.grossProfitRate,
      //       净销售额: item.netSalesAmount,
      //       期末库存: item.endingInventory,
      //       售罄率: item.exhaustionRate,
      //       SD单件数: item.sdNumber,
      //       MJX单件数: item.mjxNumber,
      //     });
      //   });

      //   this.echartDataI.rows = row;
      //   if (!column) {
      //     // column.property = column[3].property;
      //     return;
      //   }

      //   let type = this.get_chinese_name_by_en_name(column.property);
      //   if (this.highlighted.includes(type)) {
      //     return;
      //   }
      //   // 移除旧的高亮元素
      //   this.highlighted.shift();
      //   // // 添加新的高亮元素
      //   this.highlighted.push(type);

      //   console.log(JSON.stringify(this.highlighted));
      //   var arr = ["支付日期"];
      //   let array = arr.concat(this.highlighted);
      //   // let temp = arr.push(type)
      //   // console.log(JSON.stringify(temp));
      //   // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      //   var rateItem;

      //   // 遍历数组，找到包含'率'字的元素
      //   for (var i = 0; i < array.length; i++) {
      //     if (array[i].includes("率")) {
      //       rateItem = array[i];
      //       break;
      //     }
      //   }

      //   // 如果找到了包含'率'字的元素，将其移到数组最后
      //   if (rateItem) {
      //     var index = array.indexOf(rateItem);
      //     if (index !== array.length - 1) {
      //       array.splice(index, 1);
      //       array.push(rateItem);
      //     }
      //   }

      //   console.log(array);
      //   this.echartDataI.columns = array;
      // });
      if (this.queryParams.itemType == "item") {
        this.getitemSaleData(obj);
        this.getskcData(obj);
        this.selectItemStatisticsEcharts(obj);
      }
    },
    //曲线分析
    selectKeyWordStatisticsEchartsII() {
      // if (!this.formData.libraryIdList[0].id) {
      //   // console.log(555555);
      //   // this.$modal.msgError("请选择关键词");
      //   return;
      // }
      // console.log(JSON.stringify(this.formData.libraryIdList));
      // const input = [];
      // this.formData.libraryIdList.forEach((item) => {
      //   input.push(item.id);
      // });
      // this.queryParams.keyWords = input.join();
      var apply = this.noticForm.noticConfig.map((item) => item.name[0]);
      if (!apply[0].itemOrSpu) {
        this.$modal.msgError("请输入");
        return;
      }
      console.log(JSON.stringify(apply));
      // this.queryParams.inputList = apply;
      var obj = {
        ...this.timeObj,
        itemInputList: apply,
        salesGrade: this.queryParams.salesGrade,
        property: this.queryParams.property,
        itemType: this.queryParams.itemType,
      };
      console.log(JSON.stringify(obj));
      // if (
      //   this.queryParams.inputValue.includes("品牌词") ||
      //   this.queryParams.inputValue.includes("品类词") ||
      //   this.queryParams.inputValue.includes("汇总")
      // ) {
      //   this.queryParams.keyWordGrade = "一级关键字";
      // } else {
      //   this.queryParams.keyWordGrade = "二级关键字";
      // }

      // this.formData.libraryIdList.map((item) => item.id).join();
      // console.log(JSON.stringify(input));
      // this.queryParams.inputValue = input;
      // console.log(JSON.stringify(this.queryParams));
      // return;
      // this.queryParams.inputValue = "vfu官方旗舰店,1.vfu运动,af 319585";
      // console.log(JSON.stringify(this.queryParams));
      comparisonStatistics(obj).then((response) => {
        // delete this.queryParams.inputList;
        console.log(JSON.stringify(response));

        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);
        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        // let tooltip = {};
        // if (this.queryParams.property == "payConversionRate") {
        //   tooltip = {
        //     trigger: "axis",
        //     formatter: "{c}%",
        //   };
        // } else {
        //   tooltip = {
        //     trigger: "axis",
        //   };
        // }

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const optionEcharts = {
          grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "10%",
          },
          // 提示框
          tooltip: {
            trigger: "item",
            formatter: "{c}%",
          },
          xAxis: {
            data: xData,
          },
          yAxis: {
            axisLabel: { formatter: "{value}%" },
          },
          legend: {
            data: keyArray,
          },
          series,
        };
        // this.echartData.order.xData = xData;
        // this.echartData.order.series = series;
        const E = echarts.init(this.$refs.echarts);

        E.setOption(option);
        // E.dispose();
        // E.resize();
        // if (
        //   // this.queryParams.property == "payConversionRate" ||
        //   this.queryParams.property == "orderConversionRate"
        // ) {
        //   E.setOption(optionEcharts);
        // } else {
        //   E.setOption(option);
        // }
      });
    },
    keywordListlength(type) {
      // this.selectKeyWordStatisticsEchartsII();
      console.log(JSON.stringify(type));
      console.log(JSON.stringify(this.formData.libraryIdList));
      var m = [];
      this.formData.libraryIdList.forEach((item) => {
        m.push(item.id);
        // if (item.id == type) {
        //   this.$modal.msgError("你输入的关键词重复，请重新输入");
        // }
      });
      let filteredArray = m.filter(function (item) {
        return item === type;
      });

      if (filteredArray.length > 1) {
        this.$modal.msgError("你输入的关键词重复，请重新输入");
      }
    },
    //获取总览数据
    getitemSaleData(obj) {
      itemSaleData(obj).then((response) => {
        console.log(JSON.stringify(response));
        this.itemData = response ? response : {};
        // if (response) {
        //   this.itemData = response;
        // }
      });
    },
    tableEdit(row, column, cell, event) {
      console.log(JSON.stringify(row));
      // console.log(JSON.stringify(column.property));
      let obj = {
        salesGrade: this.queryParams.salesGrade,
        ...this.timeObj,
        itemBrand: this.queryParams.itemBrand,
        // item: this.productView,
        skcOne: row.skc,
        startSaleDays: this.timeGapTime.startTime,
        endSaleDays: this.timeGapTime.endTime,
      };
      this.getskuBySkcSaleList(obj);
    },
    //sku列表
    getskuBySkcSaleList(obj) {
      skuBySkcSaleList(obj).then((response) => {
        console.log(JSON.stringify(response));
        if (response) {
          this.skuitemData = response;

          this.echartDataMin.xData = response.map((item) => item.proSize);
          //库存
          this.echartDataMin.female = response.map(
            (item) => item.endingInventory
          );
          //在途库存
          this.echartDataMin.male = response.map(
            (item) => item.salesGrossProfit
          );
          //销量
          this.echartDataMin.average = response.map(
            (item) => item.netSalesNumber
          );
        } else {
          this.skuitemData = [];
          this.echartDataMin = {};
        }
      });
    },
    //skc图表点击
    SetLineChartData(index) {
      console.log(index);
      this.skcitemData.forEach((item) => {
        if (index == item.id) {
          let obj = {
            salesGrade: this.queryParams.salesGrade,
            ...this.timeObj,
            // item: this.productView,
            skcOne: item.skc,
            startSaleDays: this.timeGapTime.startTime,
            endSaleDays: this.timeGapTime.endTime,
          };
          this.getskuBySkcSaleList(obj);
        }
      });
    },
    //查看完整数据
    selectAll() {
      let obj = {
        salesGrade: this.queryParams.salesGrade,
        ...this.timeObj,
        itemOne: this.productNo,
        startSaleDays: this.timeGapTime.startTime,
        endSaleDays: this.timeGapTime.endTime,
      };
      this.getskcData(obj);
      this.open = true;
    },
    handleClose() {
      this.open = false;
      let obj = {
        salesGrade: this.queryParams.salesGrade,
        ...this.timeObj,
        itemOne: this.productNo,
        startSaleDays: this.timeGapTime.startTime,
        endSaleDays: this.timeGapTime.endTime,
      };
      this.getskcData(obj);
    },
    //skc列表
    getskcData(obj) {
      skcByItemSaleList(obj).then((response) => {
        if (response) {
          response.forEach((item, index) => {
            item.id = index;
          });
          console.log(JSON.stringify(response));
          this.skcitemData = response;
          this.tableEdit(response[0]);
          //skc曲线分析x轴
          if (this.open) {
            this.echartData.xData = response.map(
              (item) => item.spu + "\n" + item.colorProperty
            );
          } else {
            this.echartData.xData = response
              .slice(0, 8)
              .map((item) => item.colorProperty);
          }
          //库存
          this.echartData.female = response.map((item) => item.endingInventory);
          //在途库存
          this.echartData.male = response.map((item) => item.salesGrossProfit);
          //销量
          this.echartData.average = response.map((item) => item.netSalesNumber);
          console.log(JSON.stringify(this.echartData));
        } else {
          //skc
          // this.skcitemData = [];
          // this.echartData = {};
          //sku
          // this.skuitemData = [];
          // this.echartDataMin = {};
        }
      });
    },
    //匹配曲线指标
    get_chinese_name_by_en_name(en_name) {
      let res = "销售金额";

      let relation = {
        salesAmount: "销售金额",
        returnAmount: "退款金额",
        netSalesAmount: "净销售额",
        totalSalesNumber: "总销售件数",
        netSalesNumber: "净销售件数",
        returnBeforeShipmentNumber: "发货前退货件数",
        returnAfterShipmentNumber: "发货后退货件数",
        totalReturnNumber: "总退货件数",
        comprehensiveReturnRate: "综合退货率",
        grossProfit: "毛利额",
        grossProfitRate: "毛利率",
        endingInventory: "期末库存",
        exhaustionRate: "售罄率",
        sdNumber: "SD单件数",
        mjxNumber: "MJX单件数",
      };

      if (relation.hasOwnProperty(en_name)) {
        res = relation[en_name];
      }

      return res;
    },

    //指标点击回传
    handleSetLineChartData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let array = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataI.columns = array;
    },

    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      getInfo().then((res) => {
        if (res.roles.indexOf("admin") > -1) {
          listAll().then((response) => {
            let result = this.transformData(response);
            this.cascadeList = result;
          });
        }
      });
    },
    getSourceAll() {
      listAll().then((response) => {
        let result = this.transformData(response);
        this.queryParams.salesGrade = [result[0].label];
        this.cascadeList = result;
        this.handleChange();
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },

    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载商品排行数据，请稍候！");
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.ItemDateList.length <= 0) {
        this.$modal.msgError("暂无数据可导出");

        return;
      }
      this.download(
        "product/BiAnalysis/export",
        {
          ...this.queryParams,
        },
        `商品排行_${new Date().getTime()}.xlsx`
      );
    },
    // 新增
    removeDomain(item) {
      const E = echarts.init(this.$refs.echarts);

      // E.setOption(option);
      E.dispose();
      var index = this.noticForm.noticConfig.indexOf(item);
      if (index == "0") {
        // 还有一个的时候提示不能删除
        this.$message({
          message: "不能删除了",
          type: "error",
        });
        return false;
      }
      if (index !== -1 && index !== "0") {
        this.noticForm.noticConfig.splice(index, 1);
      }
    },
    // 表单新增
    addDomain(item) {
      console.log(JSON.stringify(this.noticForm.noticConfig));
      if (this.noticForm.noticConfig.length > 4) {
        this.$modal.msgError("请选择小于5个款式");
        return;
      }

      var m = item.name[0];
      if (!m.itemOrSpu) {
        this.$modal.msgError("请选择款式");
        return;
      }
      // if (!m.colorProperty) {
      //   this.$modal.msgError("请选择颜色");
      //   return;
      // }
      // if (!m.size) {
      //   this.$modal.msgError("请选择尺寸");
      //   return;
      // }
      // if (!m.productNum) {
      //   this.$modal.msgError("请输入数量");
      //   return;
      // }
      // if (!m.isReturn) {
      //   this.$modal.msgError("请选择是否归还");
      //   return;
      // }
      // var i = 0
      // if(m.isReturn){

      // }
      this.noticForm.noticConfig.push({
        name: [
          {
            // value: "",

            // phone: "",
            itemOrSpu: "",
            color: "",
            size: "",
            // productNum: "",
            // isReturn: this.noticForm.noticConfig[0].name[0].isReturn,
            // id: this.count++,
            // num: "",
            // expressCompany: "",
            // key: Date.now(),
          },
        ],
        // phone: [
        //     {
        //         value: "",
        //         key: Date.now() + "2",
        //     },
        // ],
      });
    },

    /* 获取尺寸列表 */
    testColor(key) {
      this.colorProperty = key;
      listAllSize({ productNo: this.productNo, colorProperty: key }).then(
        (res) => {
          // this.loading = false;
          this.sizeList = res;
          console.log(JSON.stringify(res));
        }
      );
    },
    /* 获取颜色列表 */
    testAdd(key) {
      this.productNo = key;
      console.log();
      productNoColorLike({ productNo: key }).then((res) => {
        // this.loading = false;
        this.ColorLike = res.data;
        console.log(JSON.stringify(this.ColorLike));
      });
    },

    /* 获取货号列表 */
    selectproductNo(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.optionsProductNo = res.data;
        console.log(JSON.stringify(this.options));
      });
    },
    changeitemType() {
      this.resetForm();
      this.ColorLike = [];
      this.sizeList = [];
      const E = echarts.init(this.$refs.echarts);

      // E.setOption(option);
      E.dispose();
    },
    resetForm() {
      this.noticForm = {
        noticConfig: [
          {
            name: [
              {
                itemOrSpu: "",
                color: "",
                size: "",
                // productNum: "",
                // isReturn: "是",
                // id: 0,
              },
            ],
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" >
/* 添加你想要的特定行的CSS样式 */
.highlight-row {
  position: sticky;
  bottom: 0;
  font-weight: bold;
}
</style>
<style lang="scss" scoped>
/* 添加你想要的特定行的CSS样式 */
// .highlight-row {
//   position: sticky;
//   bottom: 0;
//   font-weight: bold;
// }
span.textname {
  // display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
i.el-icon-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}
i.el-icon-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}
i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  // padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
}
</style>
  /** 销售金额 */
    private Double salesAmount;

    /** 退款金额 */
    private Double returnAmount;

    /** 净销售额 */
    private Double netSalesAmount;

 /** 总销售件数 */
    private Integer totalSalesNumber;

    /** 净销售件数 */
    private Integer netSalesNumber;

    /** 发货前退货件数 */
    private Integer returnBeforeShipmentNumber;

    /** 发货后退货件数 */
    private Integer returnAfterShipmentNumber;

    /** 总退货件数 */
    private Integer totalReturnNumber;

    /** 综合退货率 */
    private Double comprehensiveReturnRate;

    /** 毛利额 */
    private Double grossProfit;

    /** 毛利率 */
    private Double grossProfitRate;

    /** 期末库存 */
    private Integer endingInventory;

    /** 告罄率 */
    private Double exhaustionRate;

    /** SD单件数 */
    private Integer sdNumber;

    /** MJX单件数 */
    private Integer mjxNumber;
